
const app = new Vue({
    el: '#app',
    data() {
        // 校验学号是否存在
        const rulesSNo = (rule, value, callback) => {
            if (this.isEdit) {
                callback();
            }
            // 使用Axios
            axios.post(
                this.baseURL + 'sno/check/',
                {
                    sno: value,
                }
            )
                .then((res) => {
                    // 请求成功
                    if (res.data.code === 1) {
                        if (res.data.exists) {
                            callback(new Error('学号已存在'))
                        } else {
                            callback();
                        }
                    } else {
                        callback(new Error('效验学号后端出现异常'))
                    }
                })
                .catch((err) => {
                    console.log(err)
                });
        }

        return {
            students: [],
            pageStudents: [],
            baseURL: 'http://127.0.0.1:8000/',
            inputStr: '',
            selectStudents: [],

            total: 0,
            currentpage: 1,
            pagesize: 10,


            // 
            dialogVisible: false,
            dialogTitle: '',
            isView: false,
            isEdit: false,

            studentForm: {
                sno: '',
                name: '',
                gender: '',
                birthday: '',
                mobile: '',
                email: '',
                address: '',
                image: '',
                imageUrl: '',
            },
        }
    },
    mounted() {
        this.getStudents();
    },
    methods: {
        getStudents: function () {
            let that = this
            axios
                .get(this.baseURL + 'students/')
                .then(function (res) {
                    if (res.data.code === 1) {
                        that.students = res.data.data;
                        // 获取返回的行数
                        that.total = res.data.data.length;
                        that.getPageStudents();
                        that.$message({
                            message: '数据加载成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(function (err) {
                    console.log(err);
                })
        },
        getAllStudents() {
            this.inputStr = '';
            // 获取所有
            this.getStudents();
        },
        // 添加学生打开
        addStudent() {
            this.dialogTitle = '添加信息'
            this.dialogVisible = true;
        },
        // 
        getImageBySno(sno) {
            for (oneStudent of this.students) {
                if (oneStudent.sno == sno) {
                    return oneStudent.image;
                }
            }
        },
        // 
        updateStudent(row) {
            this.dialogTitle = '修改信息'

            this.isEdit = true;

            this.dialogVisible = true;

            this.studentForm = JSON.parse(JSON.stringify(row));

            this.studentForm.image = this.getImageBySno(row.sno)
            this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image;
        },


        // 修改更新数据库
        submitUpdateStudent() {
            // 定义that
            let that = this;
            // 执行
            axios
                .post(that.baseURL + 'student/update/', that.studentForm)
                .then(res => {
                    // 执行成功
                    if (res.data.code === 1) {
                        that.students = res.data.data;
                        that.total = res.data.data.length;
                        that.getPageStudents();
                        that.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                        // g关闭
                        that.closeDialogForm('studentForm')
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(err => {
                    // 执行失败
                    console.log(err.getTime());
                    that.$message.error('修改时获取后端查询结果出现异常')
                })
        },

        // 
        closeDialogForm(formName) {
            this.$refs[formName].resetFields();
            this.studentForm.sno = '';
            this.studentForm.name = '';
            this.studentForm.gender = '';
            this.studentForm.birthday = '';
            this.studentForm.mobile = '';
            this.studentForm.emai = '';
            this.studentForm.address = '';
            this.studentForm.image = '';
            this.studentForm.imageUrl = '';
            this.dialogVisible = false;
            this.isEdit = false;
            this.isView = false;
        },



    }
})
